<template>
  <el-card class="dict">
    <template #header>
      <div class="dict-header">
        <span>字典管理</span>
        <el-input
          v-model="params.keyword"
          placeholder="请输入字典类型翻译进行查询"
          clearable
          style="width:280px"
          @clear="getList"
        >
          <template #append>
            <div
              class="iconfont icon-search dict-search"
              @click="onSearch"
            ></div>
          </template>
        </el-input>
        <div class="dict-opts">
          <el-button @click="addDict">
            新增
          </el-button>
        </div>
      </div>
    </template>
    <ev-table
      :data="tableData"
      :table-config="config.tableConfig"
      :pag-config="params"
      @on-page-change="getList"
    >
      <template #opt="{row}">
        <el-link
          type="primary"
          size="small"
          @click="onEdit(row)"
        >
          编辑
        </el-link>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-popconfirm
          title="确定要删除吗?"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="onDelete(row)"
        >
          <template #reference>
            <el-link
              type="danger"
              size="small"
            >
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ev-table>
  </el-card>
  <el-dialog
    v-model="dialogShow"
    :title="type == 'add' ? '新增字典':'编辑字典'"
    width="30%"
    :lock-scroll="false"
    draggable
    align-center
    center
    @close="onCancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="100px"
    >
      <el-form-item
        prop="dictType"
        label="字典类型"
      >
        <el-select
          v-model="formData.dictType"
          clearable
          filterable
          allow-create
          @change="onChangeDictType"
        >
          <el-option
            v-for="item in dictTypes"
            :value="item.dictType"
            :label="item.dictType"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="dictTypeChdesc"
        label="字典类型描述"
      >
        <el-input
          v-model="formData.dictTypeChdesc"
          :disabled="dictDised"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        prop="value"
        label="字典值"
      >
        <el-input v-model="formData.value">
        </el-input>
      </el-form-item>
      <el-form-item
        prop="label"
        label="字典翻译"
      >
        <el-input v-model="formData.label">
        </el-input>
      </el-form-item>
      <el-form-item
        prop="orderNum"
        label="排序号"
      >
        <el-input-number v-model="formData.orderNum">
        </el-input-number>
      </el-form-item>
      <el-form-item
        prop="description"
        label="字典描述"
      >
        <el-input
          v-model="formData.description"
          type="textarea"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button
          type="primary"
          @click="onSave"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup name="dictManage">
import api from './service/api'
import config from './config/index'
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

interface dictType {
  dictType:string,
  dictTypeChdesc:string
}
interface dict{
  dictType:string,
  dictTypeChdesc:string,
  value: string|number,
  label: string,
  orderNum: number,
  description: string,
  id?:number
}
const params = reactive({
    pageNumber: 1,
    pageSize: 10,
    keyword: '',
    total: 0,
    show: true,
})
const form = ref<FormInstance>()
const tableData = ref([])
const dictDised = ref(false)
const onSearch = () => {
    params.pageNumber = 1
    getList()
}
const getList = () => {
    api.getDictList(params)
    .then(res => {
        const { code, data, msg } = res
        if (code == 0) {
            tableData.value = data.data
            params.total = data.pagination.total
        } else {
            this.$message.error(msg)
        }
    })
}
const addDict = () => {
    type.value = 'add'
    dialogShow.value = true
}
const onEdit = (data) => {
    Object.assign(formData, data)
    type.value = 'edit'
    dialogShow.value = true
}
const dictTypes = ref<dictType[]>([])
const getDictTypes = () => {
    api.getDictTypeList()
    .then(res => {
        const { code, data, msg } = res
        if (code == 0) {
            dictTypes.value = data
        } else {
            ElMessage.error(msg)
        }
    })
}
const dialogShow = ref(false)
const type = ref('add')
const formData = reactive<dict>({
    dictType: '',
    dictTypeChdesc: '',
    value: '',
    label: '',
    orderNum: 1,
    description: '',
})
const onChangeDictType = (val:string) => {
    if (val) {
        const dict = dictTypes.value.find(e => e.dictType == val)
        if (dict) {
            dictDised.value = true
            formData.dictTypeChdesc = dict.dictTypeChdesc
        } else {
            dictDised.value = false
            formData.dictTypeChdesc = ''
        }
    } else {
        dictDised.value = false
        formData.dictTypeChdesc = ''
    }
}
const onCancel = () => {
    reset()
    dialogShow.value = false
}
const onSave = () => {
    if (type.value == 'add') {
        delete formData.id
        api.saveDict(formData)
        .then(res => {
            const { code, data, msg } = res
            if (code == 0) {
                reset()
                dialogShow.value = false
                ElMessage.success(msg)
                getList()
                getDictTypes()
            } else {
                ElMessage.error(msg)
            }
        })
    } else {
        api.updateDict(formData)
        .then(res => {
            const { code, data, msg } = res
            if (code == 0) {
                reset()
                dialogShow.value = false
                ElMessage.success(msg)
                getList()
            } else {
                ElMessage.error(msg)
            }
        })
    }
}
const onDelete = (data:dict) => {
    const { id } = data
    api.deleteDict({ id })
    .then(res => {
        const { code, data, msg } = res
        if (code == 0) {
            ElMessage.success(msg)
        } else {
            ElMessage.error(msg)
        }
        getList()
    })
}
const reset = () => {
    Object.assign(formData, {
        dictType: '',
        dictTypeChdesc: '',
        value: '',
        label: '',
        orderNum: 1,
        description: '',
        id: '',
    })
}
onMounted(() => {
    getList()
    getDictTypes()
})
</script>
<style scoped lang='scss'>
.dict{
  .dict-header{
    display: flex;
    justify-content: space-between;
    .dict-search{
      cursor: pointer;
    }
  }

}
</style>